<template>
	<view class="shop wrap">
		<cu-custom isBack="false" textColor='#333333' fhColor='#000'>
			<!-- <block slot="backText">返回</block> -->
		</cu-custom>

		<!-- 背景 -->
		<view class="bj" :style="{backgroundImage:'url('+imgUrla+'bac.png'+')'}">
		</view>

		<!-- 选择类型 -->
		<view class="navbarTop" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
			<view class="title">
				<view class="left" :class="searchType ==1 ? 'active' : ''" @click="titleClick(1)">按城市找
				</view>
				<view class="long"></view>
				<view class="right" :class="searchType ==2 ? 'active' : ''" @click="titleClick(2)">合作店铺
				</view>
			</view>
		</view>

		<!-- 搜索 -->
		<view class="titleBox" :style="{ top: CustomBar + 'px' }">
			<view class="search">
				<view class="region" v-if="searchType ==1" @click="tocity">
					<image class="icon" :src="imgURL + 'location.png'" mode=""></image>
					<view class="city">{{ cityName }}</view>
				</view>
				<view class="seach">
					<view class="icon">
						<img :src="imgUrl + 'search.png'" alt="" />
					</view>
					<view class="line"></view>
					<view class="seached">
						<input class="text" @confirm="search" placeholder="输入店铺名称" v-model="shopName"
							placeholder-class="textYs" @blur="shopNameChange" />
					</view>
				</view>
			</view>
			<view class="topbox topboxYs">
				<view class="topDetails">
					<image :src="imgURL + 'left.png'" class="left" mode=""></image>
					<view class="list" v-if="searchType ==1">
						本城市总共有
						<view class="num">{{ ShopList.length }}</view>
						家姚记合作店
					</view>
					<view class="list" v-if="searchType ==2">
						全国总共有
						<view class="num">{{ ShopList.length }}</view>
						家姚记合作店
					</view>
					<image :src="imgURL + 'right.png'" class="right" mode=""></image>
				</view>
			</view>
		</view>

		<scroll-view class="content" :style="{ height: height - CustomBar + 'px' }" scroll-y="true"
			@scrolltolower="scrolltolower">
			<view class="listBox">
				<view class="list" @click="toShopPage(item.id)" v-for="(item,index) in ShopList" :key="index">
					<view class="left">
						<image class="img" :src='item.shopLogo'></image>
					</view>
					<view class="right">
						<view class="up">
							<view class="l">{{ item.shopName }}</view>
							<view class="r" v-if="item.jlNum>100">>100Km</view>
							<view class="r" v-else>{{ (item.jlNum).toFixed(1) }}Km</view>
						</view>
						<view class="bottom">
							<view class="l">
								<image class="icon" :src="imgURL + 'locations.png'" mode=""></image>
								<view>{{ item.addrProvinceName + item.addrCityName + item.address }}</view>
							</view>
							<view class="r">
								<image :src="imgURL + 'map.png'" mode="" @click.stop="openCity(item)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<block v-if="publicShowGainCity">
			<view class="checkCity" v-if="showGainCity">
				您当前在{{ gainCityData.fullName }} 是否切换城市
				<view class="btn" @click="changeGainCity(gainCityData)">切换</view>
				<view class="close" @click="closeGainCity">x</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				height: "",
				imgUrla: this.$http.imgUrl + '/static/',
				imgUrl: this.$http.imgUrl + "/static/news/",
				imgURL: this.$http.imgUrl + "/static/commercial/",
				publicShowGainCity: uni.getStorageSync('isShowCity'),
				showGainCity: false,

				// 当前类别
				searchType: 1,
				// 当前城市/合作店铺数据
				newCity: '',

				// 店铺数据
				lng: '',
				lat: '',
				cityName: '',
				adCode: '',
				pageNumber: 1,
				shopName: '',
				totalPage: 0,
				ShopList: [],

				// 地址切换
				gainCityData: ''
			};
		},
		onLoad() {
			this.lng = uni.getStorageSync('yslng') ? uni.getStorageSync('yslng') : uni.getStorageSync('lng')
			this.lat = uni.getStorageSync('yslat') ? uni.getStorageSync('yslat') : uni.getStorageSync('lat')
			this.cityName = uni.getStorageSync('cityName')
			this.adCode = uni.getStorageSync('adCode')
			this.height = uni.getSystemInfoSync().windowHeight;
			this.newCityData()
			this.getShopList()
		},
		onShow() {
			if (this.cityName != uni.getStorageSync('cityName')) {
				// console.log('地址改变了')
				// 初始化
				this.lng = uni.getStorageSync('yslng') ? uni.getStorageSync('yslng') : uni.getStorageSync('lng')
				this.lat = uni.getStorageSync('yslat') ? uni.getStorageSync('yslat') : uni.getStorageSync('lat')
				this.cityName = uni.getStorageSync('cityName')
				this.adCode = uni.getStorageSync('adCode')
				this.newCityData()
				this.initCsh(1)
			}

			this.isOpenCity()
		},
		methods: {
			// 当前城市数据
			async newCityData() {
				const url = this.api.new_shop.newCity
				const details = await this.$http.get(url, {
					lat: this.lat,
					lng: this.lng,
					searchType: this.searchType
				})
				this.newCity = details.data.data
				// console.log(this.newCity, '当前城市数据')
			},

			// 切换按城市查找与合作店铺
			titleClick(i) {
				this.searchType = i;
				this.newCityData()
				this.initCsh(1)
			},

			// 店铺列表
			async getShopList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const url = this.api.new_shop.shopList;
				const res = await this.https.get(url, {
					adCode: this.adCode,
					lat: this.lat,
					lng: this.lng,
					pageNumber: this.pageNumber,
					pageSize: 15,
					searchType: this.searchType,
					shopName: this.shopName,
				})
				uni.hideLoading()
				for (var i in res.data) {
					res.data[i].jlNum = this.GetDistance(this.lat, this.lng, res.data[i].lat, res.data[i].lng)
				}
				this.ShopList = this.ShopList.concat(res.data)
				this.totalPage = res.totalPage
				// console.log(res.data, '店铺列表')
			},

			// 初始化
			initCsh(num) {
				this.pageNumber = 1
				this.totalPage = 0
				this.ShopList = []
				if (num == 1) {
					this.shopName = ''
				}
				this.getShopList()
			},

			// 输入城市
			shopNameChange() {
				this.initCsh()

			},

			// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			GetDistance(lat1, lng1, lat2, lng2) {
				// var p1 = [lat1, lng1];
				// var p2 = [lat2, lng2];
				// // 返回 p1 到 p2 间的地面距离，单位：米
				// var dis = AMap.GeometryUtil.distance(p1, p2);
				// console.log(dis)
				// return dis;
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				return s;
			},

			// 打开地图
			openCity(item) {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: Number(item.lat), //要去的纬度-地址
					longitude: Number(item.lng), //要去的经度-地址
					address: item.address, //要去的详细地址
				})
			},

			// 触底
			scrolltolower() {
				if (this.pageNumber >= this.totalPage) {
					uni.showToast({
						title: '暂无数据',
						icon: 'none'
					});
					return;
				}
				this.pageNumber++
				this.getShopList()
			},

			// 是否打开定位
			async isOpenCity() {
				if (!uni.getStorageSync('isShowCity')) {
					return
				}
				const url = this.api.new_shop.newCity
				const details = await this.$http.get(url, {
					lat: this.lat,
					lng: this.lng,
					searchType: 1,
				})
				let detailsa = details.data.data
				if (detailsa.adCode != uni.getStorageSync('adCode')) {
					this.gainCityData = detailsa
					this.showGainCity = true
				} else {
					this.showGainCity = false
				}
				console.log(detailsa, '是否打开定位')
			},

			// 切换定位
			async changeGainCity(item) {
				const url = this.api.new_shop.newCity
				const details = await this.$http.get(url, {
					lng: item.lng,
					lat: item.lat,
					searchType: 1,
				})
				var detailsa = details.data.data
				uni.setStorageSync('lng', detailsa.lng)
				uni.setStorageSync('lat', detailsa.lat)
				uni.setStorageSync('cityName', detailsa.fullName)
				uni.setStorageSync('adCode', detailsa.adCode)
				this.lng = detailsa.lng
				this.lat = detailsa.lat
				this.adCode = detailsa.adCode
				this.cityName = detailsa.fullName
				this.showGainCity = false
				uni.setStorageSync('isShowCity', false)
				this.publicShowGainCity = false
				this.newCityData()
				this.initCsh(1)
			},

			// 关闭切换定位
			closeGainCity() {
				this.showGainCity = false
				uni.setStorageSync('isShowCity', false)
			},

			// 去定位
			tocity() {
				uni.navigateTo({
					url: "./stateCity",
				});
			},
			// 去商铺主页
			toShopPage(i) {
				uni.navigateTo({
					url: "./shopHomepage?id=" + i,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		height: 100vh;
		background-color: #FAFAFA;
	}

	// 背景
	.bj {
		position: fixed;
		top: -4%;
		left: 0;
		width: 100%;
		height: 1204rpx;
		background-size: 100% 100%;
	}

	// 选择类型
	.navbarTop {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		width: 60%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99999;

		// 标题
		.title {
			display: flex;
			align-items: center;

			.left,
			.right {
				width: 128rpx;
				height: 32rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;

				&.active {
					font-weight: 600;
					color: #333333;
				}
			}

			.long {
				width: 2rpx;
				height: 24rpx;
				background: rgba(153, 153, 153, 0.4);
				border-radius: 2rpx;
				margin: 0 12rpx;
			}
		}
	}

	// 搜索
	.titleBox {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		width: 702rpx;
		z-index: 2;

		.search {
			display: flex;
			align-items: center;

			.region {
				width: 144rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				margin-right: 16rpx;

				.icon {
					height: 36rpx;
					width: 28rpx;
					margin-right: 16rpx;
				}

				.city {
					flex: 1;
					height: 28rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
					line-height: 28rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.seach {
				height: 72rpx;
				flex: 1;
				background: #ffffff;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				padding: 0 16rpx;

				.icon {
					img {
						width: 44rpx;
						height: 44rpx;
					}
				}

				.line {
					width: 2rpx;
					height: 40rpx;
					background: rgba(153, 153, 153, 0.2);
					border-radius: 2rpx;
					margin: 0 16rpx;
				}

				.seached {
					flex: 1;
					// margin-left: 14rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					// width: 480rpx;

					.text {
						flex: 1;
						padding-right: 18rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.textYs {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
					}
				}

				.btn {
					position: absolute;
					right: 8rpx;
					width: 120rpx;
					height: 56rpx;
					background: #4d8bff;
					border-radius: 28rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}
		}

		.topbox {
			width: 100%;
			height: 76rpx;
			// border-bottom: 1rpx solid rgba(51, 51, 51, 0.08);
			line-height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			position: relative;
			margin-top: 40rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;

			.topDetails {
				border-bottom: 1rpx solid #F6F6F6;
				width: 654rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;

				.left,
				.right {
					width: 16rpx;
					height: 24rpx;
				}

				.left {
					margin-top: -20rpx;
				}

				.right {
					top: 10rpx;
				}

				.list {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;

					.num {
						color: #4D8BFF;
					}
				}
			}
		}

		.topboxYs {
			background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/commercial/bg2.png) no-repeat;
			background-size: 72rpx 62rpx;
			background-position: 606rpx bottom;
			background-color: #fff;
		}
	}


	.shop {
		// background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/bac.png) no-repeat;
		background-size: 100%;
		height: 100vh;

		// 店铺列表卡片
		.content {
			margin: 0 auto;
			width: 702rpx;
			padding: 182rpx 0 0;

			.listBox {
				padding-top: 24rpx;
				padding-bottom: 10rpx;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
				background-color: #FFFFFF;
			}

			// 卡牌列表
			.list {
				width: 702rpx;
				height: 160rpx;
				margin-bottom: 40rpx;
				padding: 0 24rpx;
				display: flex;

				.left {
					width: 160rpx;
					height: 160rpx;

					image {
						height: 100%;
					}

					.img {
						background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/commercial/case.png) no-repeat;
						background-size: 100%;
						text-align: center;
						font-size: 28rpx;
						line-height: 160rpx;
						color: #6f89be;
					}
				}

				.right {
					flex: 1;
					margin-left: 16rpx;
					height: 160rpx;
					overflow: hidden;

					.up {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.l {
							font-size: 28rpx;
							font-weight: 600;
							color: #333333;
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-right: 10rpx;
						}

						.r {
							font-size: 24rpx;
							font-weight: 600;
							color: #666666;
						}
					}

					.bottom {
						display: flex;
						margin-top: 26rpx;
						justify-content: space-between;
						align-items: center;

						.l {
							width: 340rpx;
							height: 64rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #999999;
							display: flex;
							align-items: center;

							view {
								flex: 1;
								overflow: hidden;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}

							.icon {
								// display: inline-block;
								width: 12rpx;
								height: 14rpx;
								margin-right: 10rpx;
							}
						}

						.r {
							width: 48rpx;
							height: 48rpx;

							image {
								height: 100%;
							}
						}
					}
				}
			}
		}

		.checkCity {
			position: fixed;
			width: 702rpx;
			height: 80rpx;
			background: rgba(0, 18, 52, 0.6);
			border-radius: 16rpx;
			backdrop-filter: blur(10px);
			bottom: 92rpx;
			left: 24rpx;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;

			.btn {
				margin-left: 180rpx;
				margin-right: 24rpx;
				width: 112rpx;
				height: 48rpx;
				background: #ffffff;
				border-radius: 24rpx;
				color: #001234;
				line-height: 48rpx;
				text-align: center;
			}

			.close {
				width: 16rpx;
				height: 16rpx;
				color: #ffffff;
				line-height: 16rpx;
			}
		}
	}
</style>